<template>
	<scroll-view class="personalinfo" :scroll-y="true" :show-scrollbar="false">
		<view class="sc-box">
			<view class="bg-img-box">
				<image class="bgimg" :src="ip+'/img/background.jpg'" mode=""></image>
				<view class="top">
					<view class="personal-author-img">
						<image v-if="avatar" class="authorimg" :src="avatar":webp="true" mode=""></image>
					</view>
					<view class="change">
						<navigator v-if="pages == 'personal'" url="/pagesA/changeinfo/changeinfo" class="edit">编辑资料
						</navigator>
						<view v-if="pages == 'personal'" class="add iconfont icon-tianjiahaoyou"></view>
						<view class="follow" @click="doFollow" v-if="pages == 'user'" :class="follow == true ? 'followed' : ''">
							<text v-show="!follow" class="icon-follow iconfont icon-jiahao1"></text>
							{{follow_text}}
						</view>
						<view class="private" @click="enterChat" v-if="pages == 'user'">私聊</view>
					</view>
				</view>
			</view>
			<view class="author-introduction">
				<view class="name">{{userName}}</view>
				<view class="douid">抖音号：{{douid}}</view>
				<view class="profile" v-if="pages == 'user' && profile != ''">{{profile}}</view>
				<view class="profile" v-if="pages == 'personal' && profile != null && profile != ''">{{profile}}</view>
				<view class="profile" v-if="pages == 'personal' && profile == null">{{profile_none}}</view>
				<view class="title-box">
					<view class="title" v-if="age!=null && age!=''">{{age}}岁</view>
					<view class="title" v-if="city!=null && city!=''">{{city}}</view>
				</view>
			</view>
			<view class="number-box">
				<view class="box">
					<text class="numer">12</text>
					<text class="text">获赞</text>
				</view>
				<view class="box" @click="fans(0)">
					<text class="numer">{{follow_length}}</text>
					<text class="text">关注</text>
				</view>
				<view class="box" @click="fans(1)">
					<text class="numer">{{fans_length}}</text>
					<text class="text">粉丝</text>
				</view>
			</view>
			<view class="add-box" v-if="pages == 'personal'">
				<icon class="add-icon iconfont icon-xiangji"></icon>
				<view class="add-text">添加随拍</view>
			</view>
			<persional-swiper v-if="list_flat" :swiper_mylist="mylist" :swiper_list="list" :ref="swiper"></persional-swiper>
		</view>

	</scroll-view>
</template>

<script>
	import t from '../common/helper.js';
	import IMService from "../lib/imservice.js";
	import PersionalSwiper from './PersonalSwiper.vue';

	export default {
		name: "PersonalInfo",
		data() {
			return {
				ip: t.o,
				follow_text: '关注',
				profile: '',
				profile_none: '你还没有点击个人简介，点击添加...',
				list_flat: false, //视频加载完
				douid: '',
				userName: '',
				city: '',
				age: '',
				avatar: '',
				follow: '',
				follow_length: 0,
				fans_length: 0,
				mylist: '', //个人发布列表
				list: '',//关注列表
			};
		},
		props: {
			pages: String,
			userId: String,
			isfollow: String,
		},
		components: {
			PersionalSwiper,
		},
		watch: {
			avatar(val) {
				this.avatar = val;
			}
		},
		methods: {
			getVideo() {
				const userId = this.pages=="user"?this.userId:uni.getStorageSync('user')[0].userId;
				let promise1 = new Promise((resolve,reject) => {
					uni.request({
						url: t.o+'/myvideo',
						method: 'POST',
						data: {
							userId: userId,
						},
						success: res => {
							this.mylist = res.data.data;
							resolve();
						}
					})
				})
				let promise2 = new Promise((resolve,reject) => {
					uni.request({
						url: t.o+'/myvideo',
						method: 'POST',
						data: {
							userId: userId,
							type: 'love'
						},
						success: res => {
							this.list = res.data.data;
							resolve();
						}
					})
				})
				Promise.all([promise1,promise2]).then(res => {
					this.list_flat = true;
				})
			},
			//关注
			doFollow() {
				this.follow = !this.follow;
				this.$emit('doFollow',this.follow);
				this.follow_text = this.follow == true ? '取消关注' : '关注';
			},
			//获取用户资料
			getUser() {
				const vm = this;
				uni.request({
					url: `${t.o}/user`,
					method: 'POST',
					data: {
						id: vm.userId,
					},
					success: res => {
						this.douid = res.data.data[0].userId;
						this.profile = res.data.data[0].introduce;
						this.userName = res.data.data[0].userName;
						this.city = res.data.data[0].city;
						this.age = res.data.data[0].age;
						this.avatar = this.ip+'/img/'+res.data.data[0].avatar;
					}
				})
			},
			//获取当前用户资料
			getMaster() {
				let master = uni.getStorageSync('user')[0];
				this.douid = master.userId;
				this.profile = master.introduce;
				this.userName = master.userName;
				this.city = master.city;
				this.age = master.age;
				this.avatar = this.ip+'/img/'+master.avatar;
			},
			//再次获取头像
			getAvatar() {
				this.avatar = uni.getStorageSync('user')[0].avatar;
			},
			//获取关注消息
			getFollow() {
				const userId = uni.getStorageSync('user')[0].userId;
				uni.request({
					url: `${t.o}/follow`,
					data: {
						userId: userId,
					},
					success: res => {
						this.follow_length = res.data.data.follow_list.length;
						this.fans_length = res.data.data.byfollow_list.length;
					}
				})
			},
			//前往聊天室
			enterChat() {
				uni.navigateTo({
					url: '/pagesA/chat/chat?id=' + this.userId
				})
			},
			//前往关注列表
			fans(index) {
				uni.navigateTo({
					url: '/pagesB/followlist/followlist?index='+index
				})
			}
		},
		created() {
			if (this.pages == 'user') {
				this.follow = this.isfollow == 'true' ? true : false;
				this.follow_text = this.follow == true ? '取消关注' : '关注';
				this.getUser();
				this.getVideo();
				let currentUser = uni.getStorageSync('user')[0];
				if (this.goEasy.getConnectionStatus() == 'disconnected') {
					getApp().globalData.imService = new IMService(this.goEasy, this.GoEasy);
					getApp().globalData.imService.connect(currentUser);
				}
			}
		}
	}
</script>

<style lang="scss">
	.personalinfo {
		width: 100%;

		.sc-box {
			height: 100%;

			.bg-img-box {
				width: 100%;
				height: 200px;
				position: relative;

				.bgimg {
					width: 100%;
					height: 100%;
				}
			}

			.top {
				width: 100%;
				position: absolute;
				bottom: 0px;
				left: 0px;
				z-index: 20;
				width: 100%;
				height: 50px;
				background-color: #000000;

				.personal-author-img {
					position: absolute;
					top: -20px;
					margin-left: 30px;
					border-radius: 50%;
					border: 3.5px solid #000000;

					.authorimg {
						width: 70px;
						height: 70px;
						border-radius: 50%;
					}
				}

				.change {
					position: absolute;
					top: 10px;
					right: 20px;
					height: 40px;
					width: 60%;
					line-height: 40px;
					font-size: 16px;
					text-align: center;
					border-radius: 5px;
					overflow: hidden;
					display: flex;
					justify-content: space-between;

					.edit,
					.add {
						background-color: #333333;
						border-radius: 5px;
					}

					.edit {
						float: left;
						width: 80%;
					}

					.add {
						float: left;
						margin-left: 2%;
						width: 18%;
					}

					.follow {
						flex: 0 0 100%;
						height: 100%;
						display: inline-block;
						border-radius: 5px;
						background-color: #ff5555;
						transition: all 0.3s;
						margin-right: 2%;

						.icon-follow {
							font-size: 14px;
							font-weight: 700;
							line-height: 40px;
							margin-right: 5px;
						}
					}

					.followed {
						background-color: #333333;
						flex: 0 0 49%;
					}

					.private {
						border-radius: 5px;
						background-color: #333333;
						transition: all 0.3s;
						display: inline-block;
						flex: 0 0 49%;
					}
				}
			}

			.author-introduction {
				margin-top: 20px;
				padding: 0 20px;

				.name {
					font-size: 20px;
					height: 30px;
					font-weight: 500;
					line-height: 30px;
				}

				.douid {
					height: 20px;
					font-size: 14px;
					line-height: 20px;
					margin: 10px 0 5px;
				}

				.profile {
					height: 20px;
					line-height: 20px;
					margin: 22px 0;
				}

				.title-box {
					font-size: 14px;

					.title {
						background-color: #333333;
						border-radius: 3px;
						text-align: center;
						display: inline-block;
						height: 25px;
						line-height: 25px;
						padding: 0 7px;
						color: #888888;
						margin-right: 5px;
					}
				}
			}

			.number-box {
				display: flex;
				padding: 0 20px;
				margin: 20px 0;

				.box {
					margin-right: 5px;

					.numer {
						font-weight: 600;
					}

					.text {
						display: inline-block;
						font-size: 14px;
						height: 16px;
						line-height: 16px;
						color: #888888;
						width: 40px;
						text-align: center;
					}
				}
			}

			.add-box {
				text-align: center;
				margin: 0 20px 10px;
				border-radius: 3px;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				background-color: #232323;

				.add-icon {
					margin-right: 7px;
				}

				.add-text {
					display: inline-block;
				}
			}

		}
	}
</style>
